<template>
    <div style="height:100vh;background-image:linear-gradient(135deg,#1352F2,#3C82F5);">
        <el-container style="padding:30px;">
            <el-header>
                <el-row>
                    <el-col :span="3">
                        <img src="/imgs/login/logo.png" style="height: 50px;">
                    </el-col>
                    <el-col :span="1">
                        <img src="/imgs/login/auto.png" style="height: 50px;">
                    </el-col>
                    <el-col :span="1">
                        <img src="/imgs/login/verticalLine.png" style="height: 50px;">
                    </el-col>
                    <el-col :span="19">
                        <span style="color:#fff;font-size:30px;font-weight: bold;">智慧车辆运营管理系统</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row>
                    <el-col :span="16">
                        <img src="/imgs/login/bg.png" style="width: 100%;margin-top:60px;">
                    </el-col>
                    <el-col :span="8">
                        <el-card style="margin-top: 80px;">
                            <h3 style="text-align: center;">员工登录</h3>
                            <el-form label-position="top">
                                <el-form-item label="用户名">
                                    <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
                                </el-form-item>
                            </el-form>
                            <div style="color:#666;text-align:center;font-size: 14px;">(体验账号:tom 密码:123456)</div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
    import {ref} from "vue";
    import qs from "qs";
    import axios from "axios";
    import {ElMessage} from "element-plus";
    import router from "@/router";

    //定义对象用来保存用户输入的用户名与密码
    const user = ref({username: "", password: ""});
    //定义登录方法
    const login = ()=>{
        console.log(user.value);//{username: 'tom', password: '123'}
        //1.利用qs工具将接收到的表单参数转为查询字符串格式
        let data = qs.stringify(user.value);
        console.log(data);//username=tom&password=123
        //2.给后端发送登录请求
        axios.post('http://localhost:8080/v1/user/login',data).then((response)=>{
            console.log(response.data);
            if(response.data.code == 2000){
                //登录成功，将用户信息保存到localStorage中
                localStorage.setItem('user',JSON.stringify(response.data.data));
                ElMessage.success('登录成功！');//提示成功
                router.push('/')//跳转至用户页
            }else{
                ElMessage.error(response.data.msg);//提示失败
                user.value ={username: "", password: ""};//清除输入框数据
            }
        })
    }
</script>

<style scoped>

</style>